<!--
 * @Author: pancc 527847805@qq.com
 * @Date: 2023-04-20 10:07:00
 * @LastEditors: pancc 527847805@qq.com
 * @LastEditTime: 2023-05-08 10:33:20
 * @FilePath: \pcj\src\components\o-table\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="otable">
        <div class="mt-10" v-for="(item, index) in tableData" :key="index">
            <ul class="otable-header">
                <li>
                    <el-tooltip placement="bottom" effect="light">
                        <template #content>
                            <qrcode-vue :value="data" size:300></qrcode-vue>
                        </template>
                        <icon name="erweima" class="mr-15" style="font-size:20px;cursor:pointer;" />
                    </el-tooltip>
                    <el-tooltip placement="bottom" effect="light">
                        <template #content>
                            <p>是否确认{{ item.isUrgent ? "取消" : "" }}加急?</p>
                            <p style="display: flex; justify-content: flex-end;">
                                <el-button type="primary" size="small" @click="onUrgentEdit(item.id)">是</el-button>
                            </p>
                        </template>
                        <icon class="mr-15" style="cursor: pointer;" name="jiaji" 
                            :style="item.isUrgent ? 'color: #ff5858' : ''" />
                    </el-tooltip>
                    <span class="mr-15">
                        编号 <span class="link-color" style="cursor: pointer;" @click="onSerialClick(item.id)">{{ item.serialNo }}</span>
                    </span>
                    <span class="mr-15">
                        供应商 <span class="link-color" style="cursor: pointer;">{{ item.providerName }}</span>
                    </span>
                    <el-tooltip placement="bottom" effect="light">
                        <template #content>
                            <div v-for="(p) in item.orderBuyProducts" :key="p.id">
                                {{ p.productSerialNo || '' }}
                                &nbsp;
                                {{ p.productName || '' }}
                            </div>
                        </template>
                        <span class="mr-15 set-max-length">{{ item.orderBuyProducts[0].productName }}</span>
                    </el-tooltip>

                    <span class="mr-15">发起日期 &nbsp;&nbsp;{{ item.initiateDate }}</span>
                    <span class="mr-15"> 截止日期 &nbsp;&nbsp; {{ item.initiateDate }}</span>
                </li>
                <li><el-button size="small">复制</el-button></li>
            </ul>
            <div class="otable-page">
                <div class="otable-page-col" v-for="(n) in item.orderBuyTasks" :key="n.id" @click="onTaskSel(n.id)">
                    <div class="otable-page-col-box">
                        <i class="middle"></i>
                        <i class="right"></i>
                        <div class="left" style="width:10%;">
                        </div>
                        <span style="position: absolute; left: 28px; z-index: 4;">{{ n.taskName }}</span>
                    </div>
                    <div v-if="n.offices.length>0" class="otable-page-col-office">
                        {{ getOfficeName(n.offices) }}
                    </div>
                    <div class="otable-page-col-date">
                        <span>截止日期 &nbsp;&nbsp;{{ extDay(n.abortDate) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flexible-pagination">
        <el-pagination v-model:current-page="pageFilter.pageIndex" v-model:page-size="pageFilter.pageSize"
            :page-sizes="[10, 30, 60, 100]" background layout="total, sizes, prev, pager, next, jumper" :total="tableTotal"
            @size-change="onSizeChange" @current-change="onCurrentChange" />
    </div>
</template>

<script setup>
import QrcodeVue from 'qrcode.vue'
import { inject, reactive } from 'vue';
import { get } from '@/api/index';
import { extDay } from '@/config/newday';
let emit = defineEmits(['update:modelValue', 'onUrgentEditBack', 'onTaskSelBack', 'onSerialClickBack']);
let day = inject('$day');
let props = defineProps({
    tableData: {
        type: Array,
        default: () => {
            return []
        }
    },
    tableTotal: {
        type: Number,
        default: 0
    }
})

let pageFilter = reactive({
    pageIndex: 1,
    pageSize: 20
});

let data = reactive({
    payUrl: '千万别搭理傻逼',
    size: 256
})

// 加急按钮事件
const onUrgentEdit = async (id) => {
    if (!id) return;
    emit('onUrgentEditBack', { id: id });
}

// 点击节点事件
const onTaskSel = (id) => {
    if (!id) return;
    emit('onTaskSelBack', { id: id });
}

// 点击编号事件
const onSerialClick = (id) => {
    emit('onSerialClickBack', { id: id });
}

// 获取负责人名称
const getOfficeName = (vals) => {
    let res = '';
    if (vals && vals.length) {
        let names = vals.map(n => n.name);
        res = names.join(',');
    }
    return res;
}

// 切换分页大小
const onSizeChange = val => {
    pageFilter.pageSize = val;
    emit('onChangePage', pageFilter);
};

const onCurrentChange = val => {
    pageFilter.pageIndex = val;
    emit('onChangePage', pageFilter);
}

</script>


<style lang="scss" scoped>
.otable {
    // height: 180px;
    height: 90%;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;

    &-header {
        background-color: #d6f2f7;
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        padding: 0px 10px;

        li {
            display: flex;
            align-items: center;
        }

        .link-color {
            padding: 0px 5px;
            color: #409eff;
        }

        .set-max-length {
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    &-page {
        // height: 120px;
        display: flex;
        flex-grow: 1;
        overflow-x: auto;
        border: 1px solid #e5e8ef;
        padding: 10px;

        &-col { 
            width: 190px;
            display: flex;
            flex-direction: column;

            &-office {
                height: 24px;
                max-width: 180px;
                display: flex;
                align-items: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin: 5px 5px 0px 5px;
            }

            &-box {
                height: 36px;
                display: flex;
                align-items: center;
                background: #e5e8ef;
                z-index: 1;
                position: relative;
                cursor: pointer;

                &:hover {
                    &::after {
                        width: 100%;
                        opacity: 0;
                    }
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    // height: 100%;
                    width: 0;
                    background-color: #fff;
                    opacity: 0.5;
                    transition: all 1.5s;
                }

                .left {
                    width: 100%;
                    // height: 100%;
                    display: flex;
                    align-items: center;
                    z-index: 2;
                    position: absolute;
                    background-color: #67c23a;

                }

                .middle {
                    z-index: 3;
                    position: absolute;
                    left: 0px;
                    transition: all 0.3s;
                    border-top: 18px solid transparent;
                    border-left: 18px solid #fff;
                    border-bottom: 18px solid transparent;
                }

                .right {
                    z-index: 3;
                    position: absolute;
                    right: 0px;
                    transition: all 0.3s;
                    border-top: 18px solid #fff;
                    border-left: 18px solid transparent;
                    border-bottom: 18px solid #fff;
                }
            }

            &-date {
                height: 24px;
                display: flex;
                align-items: center; 
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin: 5px 5px 0px 5px;
            }
        }


    }
}
</style>